import React from 'react';
import createG2 from 'g2-react';
import G2 from 'g2';
import moment from 'moment';
import { Card, Button, Badge, Modal, notification, Col } from 'antd';
import CountUp from 'react-countup';
import styles from './NewCard.less';

function getArray(a) {
  let hash = {},
    len = a.length,
    result = [];

  for (let i = 0; i < len; i++) {
    if (!hash[a[i]]) {
      hash[a[i]] = true;
      result.push(a[i]);
    }
  }
  return result;
}

class NewCard extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      msg: [],
      all_msg: [],
      delete_msg: [],
    };
  }
  openNotification = (type) => {
    if (this.state.msg.length < 1) return;

    const arr = this.state.msg.splice(0, 1);
    let status;
    if (arr[0].pay_style == 3) {
      type = 'info';
      status = '人工联系';
    } else {
      status = '已支付';
    }

    this.setState({
      msg: this.state.msg,
      delete_msg: this.state.delete_msg.concat(arr),
    });


    notification[type]({
      message: `${moment(arr[0].order_time).format('hh:mm:ss')} 订单金额：￥${arr[0].shop_money / 100}`,
      description: `订单状态:${status} `,
    });
  };
  componentWillReceiveProps({ msg, my_msg }) {
    const msgs = msg || [];

    this.setState({
      all_msg: my_msg,
    });

    for (let i = 0; i < msgs.length; i++) {
      for (let j = 0; j < this.state.delete_msg.length; j++) {
        if (msgs[i] === this.state.delete_msg[j]) {
          msgs.splice(i, 1);
          i--;
        }
      }
    }
    this.setState({
      msg: msgs,
    });
  }
  render() {
    let all_price = 0;
    const arr = [];
    const all_msg = this.state.all_msg || [];
    for (let i = 0; i < all_msg.length; i++) {
      all_price += all_msg[i].shop_money;
      arr.push(all_msg[i].user_id);
    }
    const unit_price = all_price / all_msg.length / 100 || 0;
    const arr_user = getArray(arr);
    const count = parseFloat((all_msg.length / arr_user.length).toFixed(1)) || 0;

    return (
      <Card>
        <div className={styles.newBack}>

          <div className={styles.header}>

            <p className={styles.fontSize}>客单价|客单量</p>

            <div className={styles.btn}>
              <Badge count={this.state.msg.length}>
                <Button onClick={() => this.openNotification('success')} >订单详情</Button>
              </Badge>
            </div>

          </div>

          <div className={styles.contect}>
            <div style={{ flex: '1', textAlign: 'center', borderRight: '1px solid #e8e8e8' }}>
              <p className={styles.fontSize}> 客单价 </p>
              <p className={styles.nubSize}>
                <CountUp
                  start={0}
                  end={unit_price}
                  duration={2.75}
                  decimals={1}
                  useEasing
                  useGrouping
                  separator=""
                />
              </p>
              <p className={styles.fontSize}> 元/单 </p>
            </div>
            <div style={{ flex: '1', textAlign: 'center' }}>
              <p className={styles.fontSize}> 客单量 </p>
              <p className={styles.nubSize}>
                <CountUp
                  start={0}
                  end={count}
                  duration={2.75}
                  decimals={1}
                  useEasing
                  useGrouping
                  separator=","
                />
              </p>
              <p className={styles.fontSize}> 单/人 </p>
            </div>
          </div>
        </div>
      </Card>
    );
  }

}


NewCard.propTypes = {
};

export default NewCard;
